<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title})">
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>标签管理</title>
    <link href="../../static/css/semantic.min.css" rel="stylesheet">
    <link href="../../static/css/style.css" rel="stylesheet">
</head>
<body>
<!--导航 -->
<nav th:replace="admin/_fragment::menu(4)" class="ui inverted attached segment m-padding-tb-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">管理后台</h2>
            <a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide" th:classappend="${n == 1}?'active':''"><i class="home mini icon m-icon"></i>博客</a>
            <a href="#" th:href="@{/admin/types}" class="m-item item m-mobile-hide" th:classappend="${n == 2}?'active':''"><i class="idea mini icon m-icon"></i>分类</a>
            <a href="#" th:href="@{/admin/tags}" class="m-item item m-mobile-hide" th:classappend="${n == 3}?'active':''"><i class="tags mini icon m-icon"></i>标签</a>
            <a href="#" th:href="@{/admin/records}" class="m-item item m-mobile-hide" th:classappend="${n == 4}?'active':''"><i class="file mini icon m-icon"></i>记录点滴</a>
            <a href="#" th:href="@{/admin/file/list}" class="m-item item m-mobile-hide" th:classappend="${n == 5}?'active':''"><i class="file mini icon m-icon"></i>图片管理</a>
            <a href="#" th:href="@{/admin/users}" class="m-item item m-mobile-hide" th:classappend="${n == 6}?'active':''"><i class="user secret mini icon m-icon"></i>系统设置</a>
            <div class="right m-item item m-mobile-hide">
               <div class="ui dropdown item">
                   <div class="text">
                       <img src="../../static/images/girl.jpeg" alt="" class="ui avatar image">
                       彭阳宴
                   </div>
                   <i class="dropdown icon"></i>
                   <div class="menu">
                       <a href="#" class="item">注销</a>
                   </div>
               </div>
            </div>
        </div>
    </div>
    <div class="ui menu toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </div>
</nav>
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/records/input}" class="item teal active">新增</a>
            <a href="#" th:href="@{/admin/records}" class="item">列表</a>
        </div>
    </div>
</div>

<!-- 中间内容 -->
<div class="m-container-small m-padding-tb-small m-container-height">
    <div class="ui container">
        <form class="ui form m-padding-bottom-big m-padding-top" method="post"  th:object="${record}" th:action="@{/admin/records/post}">
            <input type="hidden" name="id" th:value="*{id}">
            <div class="field required">
                <div class="ui left labeled input">
                    <label class="ui teal label basic ">记录内容</label>
                    <input type="text" name="content" placeholder="请输入记录内容" th:value="*{content}">
                </div>
            </div>
            <div class="ui error message"></div>
            <div class="ui m-margin-top-small">
                <button class="ui positive right labeled icon button right floated" type="submit" >确认<i class="checkmark icon"></i></button>
                <button class="ui black deny button right floated" onclick="window.history.go(-1)">返回</button>
            </div>
        </form>

    </div>
</div>

<!-- 底部footer -->
<footer th:replace="admin/_fragment::footer" class="ui inverted vertical segment m-margin-top-small">
    <div class="ui center aligned container">
        <div class="ui stackable inverted divided grid m-padding-tb-big">
            <div class="three wide column">
                <div class="ui item">
                    <img src="../../static/images/girl.jpeg" alt="" class="ui rounded image m-inline-block" style="width: 100px;">
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                    <a href="#" class="item">用户故事{ user story }</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted header m-text-thin m-text-spaced">最新博客</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">xxxxxxxxxxxxxxxxxxxxx</p>
            </div>
        </div>
        <div class="ui inverted selection divider"></div>
        <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2020 - 2021 Mr.Peng</p>
    </div>
</footer>

<!--/*/<th:block th:replace="admin/_fragment::script">/*/-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide')
    });
    $('.ui.dropdown').dropdown({
      on: 'hover'
    })
    $('.ui.form').form({
        fields: {
            name: {
                identifier: 'content',
                rules:[{
                    type: 'empty',
                    prompt: '内容不能为空'
                }]
            }
        }
    })
    $('.message .close')
        .on('click', function() {
            $(this)
                .closest('.message')
                .transition('fade')
            ;
        })
    ;

</script>
</body>
</html>